<template>
    <section class="text-center">
        <div v-if="boole" class="container">
            <img class="album-banner" v-bind:src="showImg(path)" alt="banner" />
        </div>
        <div v-if="booles" id="images" class="">

        </div>
    </section>
</template>

<script>
    export default {
        name: 'banner',
        components: {},
        props: {
            images: {
                default: function () {
                    return ["68764646asd.jpg","63541313eww.jpg","d043ad4bd11373f03bec7761ac0f4bfbfaed0478.jpg"];
                },
            },
            path: {
                default: "68764646asd.jpg"
            },
            boole: {
                default: false
            },
            booles: {
                default: false
            },
            url: {
                default: 'http://127.0.0.1:9003/file/f/banner/'
            },
        },
        data: function () {
            return {


            }
        },
        mounted: function () {
            let _this = this;
            _this.showImgs(_this.images);
        },
        methods: {
            showImg: function (path) {
                let _this = this;
                let rul = "";
                //返回一个访问后端服务器的路径。
                //这个路径用于讲到图片
                // uploadfile下的子目录/文件名
                rul = _this.url + path;
                return rul;
            },
            showImgs: function (images) {
                let _this = this;

                let rul = "";
                let i = 0;

                function setHtml(url){
                    $("#images").html('<img id="img" class="album-banner" src="' + url + '" alt="banner" />');
                }
                setHtml(_this.url + images[i]);
                let interval = setInterval(function () {
                    $("#images").empty();
                    rul = _this.url + images[i];
                    setHtml(rul);
                    i = i + 1;
                    if (i == images.length) {
                        i = 0;
                    }
                }, 2000);


            },
        },

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .album-banner{
        width: 100%;
    }
</style>
